<template>
  <div>233</div>
</template>

<script>
import FlowGraph from '@/assets/js/tool/antvX6'
import { mapState } from 'vuex'
export default {
  name: 'AntvX6',
  data () {
    return {
      graph: null
    }
  },
  mounted () {
    console.log(this.$store.state.name)
    console.log(mapState)
  },
  methods: {
    async initGraph (graphId) {
      this.graph = new FlowGraph()
      this.graph.initGraph(graphId)
      const male = 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*kUy8SrEDp6YAAAAAAAAAAAAAARQnAQ'
      const female = 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*f6hhT75YjkIAAAAAAAAAAAAAARQnAQ'
      const arrow = require('@/assets/u1132.png')
      const { graph } = this.graph
      // const { data: res } = await this.$http.get('/adp/adp/sql/getSqlBlood?currentTime=1648690768425&taskId=623')
      let mockData = require('@/assets/js/tool/antvX6/mockData.json')
      // let mockData = res.data
      let nodes = []
      let edges = []
      for (let i = 0; i < mockData.length; i++) {
        if (mockData[i].shape === 'edge') {
          edges.push(this.graph.createEdge(mockData[i]))
        } else {
          mockData[i].attrs = {
            image: {
              xlinkHref: arrow
            }
          }
          mockData[i].width = 150
          mockData[i].height = 24
          for (let j = 0; j < mockData[i].ports.length; j++) {
            if (mockData[i].ports[j].id === mockData[i].id) {
              mockData[i].ports[j].attrs.image = { xlinkHref: arrow }
            }
          }
          nodes.push(this.graph.createNode(mockData[i]))
        }
      }
      this.graph.resetCells(nodes, edges)
      this.graph.setup()
      this.$nextTick(() => {
        this.graph.centerContent()
      })
      this.graph.zoomTo(0.8)
      this.graph.layout('LR')
    },
    destroy () {
      this.graph.destroy()
    },
    exportData () {
      console.log(this.graph.exportData())
      this.graph.importData({cells: [this.graph.exportData().cells[6]]})
    }
  }
}
</script>

<style lang="less" scoped>

</style>
